---
title: Create reusable Tailwind CSS + React components
---

import Link from "next/link";
import { Hero } from "@/components/Hero";

<Hero />

<div className="flex flex-col gap-8">
<div className="flex-1">
  <div className="text-xl text-center font-semibold">Turn this React component:</div>

```tsx
import * as React from "react";
import clsx from "clsx";

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx(
      "rounded-lg border bg-slate-100 text-white shadow-sm",
      className,
    )}
    {...props}
  />
));
```

</div>
<div className="flex-1">
  <div className="text-xl text-center font-semibold">Into a single line:</div>

```tsx
import { twc } from "react-twc";

const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;
```

</div>
</div>

## Features

With just one single line of code, you can create a reusable component with all these amazing features out-of-the-box:

- ⚡️ Lightweight — only 0.49kb
- ✨ Autocompletion in all editors
- 🎨 Adapt the style based on props
- ♻️ Reuse classes with `asChild` prop
- 🦄 Work with all components
- 😎 Compatible with React Server Components
- 🚀 First-class `tailwind-merge` and `cva` support

<div className="my-8">
  <Link
    className="inline-block text-lg rounded-lg border border-indigo-9 font-medium px-4 py-2 transition hover:border-indigo-11"
    href="/docs/getting-started"
  >
    Get started with TWC →
  </Link>
</div>
